<template>
	<view class='u-p-50'>
		<!-- <view class="u-flex u-row-center u-p-t-40 u-p-b-40">
			<u-image class='u-m-t-40 u-m-b-40' width='160rpx' height='160rpx' src="/static/logo.png" shape="circle">
			</u-image>
		</view> -->
		<view class="u-p-t-40 u-p-b-40 u-m-t-80">
			<view class="w-login-title">登录</view>
		</view>
		<u-form :model="form" ref="uForm" label-width='120'>
			<u-form-item label="手机号" prop="mobile">
				<u-input v-model="form.mobile" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label="密码" prop="password">
				<u-input type='password' v-model="form.password" placeholder="请输入密码" />
			</u-form-item>
		</u-form>
		<u-button class='u-m-t-80' type='success' @click="submit" :loading='loading'>登录
		</u-button>
		<view class="u-flex u-row-right u-m-t-30 u-p-l-20 u-p-r-20">
			<view class="u-light-color" @click="goPage('/pages/login/forget-pwd/forget-pwd')">
				忘记密码？
			</view>
			<!-- <view class="u-light-color" @click="goPage('/pages/login/register/register')">
				立即注册
			</view> -->
		</view>
		<view class="u-m-t-80 u-p-t-80 u-flex u-row-center ">
			<u-checkbox label-disabled v-model="checked" name="1" shape='circle'><text
					class="u-font-20">登录即表示同意<text class="u-light-color" @click="$u.route('/pages/login/agreement/agreement')">《用户协议》</text>、<text
						class="u-light-color" @click="$u.route('/pages/login/policy/policy')">《隐私政策》</text></text></u-checkbox>
		</view>
		<view class="w-reg-btn u-flex u-row-center">
			<text class="u-tips-color">没有账号？</text><text class="u-light-color"
				@click="goPage('/pages/login/register/register')">立即注册</text>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/login.js'
	import {
		getByMobile
	} from '@/api/index.js'
	export default {
		data() {
			return {
				loading: false,
				checked: false,
				form: {
					mobile: '',
					password: '',
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					password: [{
						min: 5,
						required: true,
						message: '密码不能少于5个字',
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$u.debounce(
					this.$refs.uForm.validate(valid => {
						if (valid) {
							if(!this.checked){
								this.$u.toast('请勾选用户协议')
								return
							}
							this.loading = true
							login(this.form).then(res => {
								this.loading = false
								uni.setStorageSync('token_type', res.token_type)
								uni.setStorageSync('sessionid', res.sessionid)
								uni.setStorageSync('expires_in', res.expires_in)
								this.$store.commit('setLogin', 1)
								getByMobile({
									mobile: this.form.mobile
								}).then(res => {
									uni.setStorageSync('ownerId', res.id)
									this.$store.commit('setUserInfo', res)
									this.$store.dispatch('cartQueryByUser')
									this.$u.route({
										type: 'tab',
										url: '/pages/index/index'
									})
								})
							}).catch(err => {
								this.loading = false
							})
						} else {
							console.log('验证失败');
						}
					})
				)
			},
			goPage(url) {
				this.$u.route(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.w-reg-btn {
		position: fixed;
		bottom: 50rpx;
		width: calc(100% - 100rpx);
	}

	.w-login-title {
		font-size: 27px;
		font-weight: 700;
		color: #262626;
		position: relative;

		// &::after {
		// 	position: absolute;
		// 	content: '';
		// 	left: 0;
		// 	z-index: -1;
		// 	bottom: 0;
		// 	height: 15rpx;
		// 	width: 110rpx;
		// 	background-color: #88DFBA;
		// 	border-radius: 2rpx;
		// }
	}
</style>
